<template>
  <div class="hello">
    <div class="list">
      <p>新增列名 <input type="text" placeholder="请输入列名" /></p>
      <el-tabs
        :tab-position="tabPosition"
        style="
          height: 80%;
          margin-top: 15px;
          background: #f7f8fa;
          border: 1px solid #e8eaed;
          border-left: none;
        "
      >
        <el-tab-pane label="公式/函数">
          <div
            onselectstart="javascript:return false;"
            class="hanshu"
            @click="hanshu($event)"
          >
            <i class="el-icon-d-arrow-right"></i><br />函数
          </div>
          <div class="hanshulist" style="display: none">
            <input type="text" placeholder="搜索" />
            <el-tree style="margin-top:10px" onselectstart="javascript:return false;" :data="data" :props="defaultProps"></el-tree>
          </div>
          <div class="hanshulist">
            <input type="text" placeholder="搜索" />
            <el-tree style="margin-top:10px" onselectstart="javascript:return false;" :data="data2" :props="defaultProps2"></el-tree>
          </div>
          <div class="gongshi" id="lu">
            <div>
              <span><a href="#">+</a></span>
              <span><a href="#">-</a></span>
              <span><a href="#">×</a></span>
              <span><a href="#">/</a></span>
              <span><a href="#">(</a></span>
              <span><a href="#">)</a></span>
              <span style="font-size: 14px; float: right">字段类型 A</span>
              <p style="margin-top: 313px; z-index: 10">
                <span v-show="true" style="font-size: 12px; color: #9ea6b2"
                  >公式合法</span
                >
                <span
                  v-show="false"
                  style="
                    font-size: 12px;
                    color: #e45054;
                    background: #ffecec;
                    padding: 1px 3px;
                  "
                  >公式不合法</span
                >
              </p>
            </div>
            <div
              contenteditable="true"
              placeholder="示例：销售额 / 计划销售额"
              style="width: 98%; margin: 0 auto"
            ></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="时间差">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            时间差=
            <el-select v-model="value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            －
            <el-select v-model="value2" clearable placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="margin-top: 10px; margin-left: 60px">
            <el-select v-model="value3" clearable placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
        </el-tab-pane>
        <el-tab-pane label="获取时间">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            选择字段
            <el-select v-model="aa" clearable placeholder="请选择">
              <el-option
                v-for="item in aa"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            获取时间
            <el-select v-model="value4" clearable placeholder="请选择">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
        </el-tab-pane>
        <el-tab-pane label="所有值/组内">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            取值规则
            <el-select v-model="value5" clearable placeholder="请选择">
              <el-option
                v-for="item in options5"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            数值来自
            <el-select
              v-model="value6"
              clearable
              placeholder="请选择"
              style="margin-right: 10px"
            >
              <el-option
                v-for="item in options6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            统计方式
            <el-select v-model="value7" clearable placeholder="请选择">
              <el-option
                v-for="item in options7"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 11px">
            取值描述
          </div>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 4px">
            <textarea
              name=""
              id=""
              style="
                border-radius: 5px;
                width: 650px;
                height: 270px;
                margin-left: 0.8%;
                padding-left: 15px;
                background: #fff;
              "
              disabled="disabled"
            >
所有【7天内重复住院人数】求和</textarea
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="累计积/组内">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            取值规则
            <el-select v-model="value8" clearable placeholder="请选择">
              <el-option
                v-for="item in options8"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            数值来自
            <el-select
              v-model="value6"
              clearable
              placeholder="请选择"
              style="margin-right: 10px"
            >
              <el-option
                v-for="item in options6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 11px">
            取值描述
          </div>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 4px">
            <textarea
              name=""
              id=""
              style="
                border-radius: 5px;
                width: 650px;
                height: 270px;
                margin-left: 0.8%;
                padding-left: 15px;
                background: #fff;
              "
              disabled="disabled"
            >
从上到下依次累加【7天内重复住院人数】</textarea
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="排名/组内">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            取值规则
            <el-select v-model="value9" clearable placeholder="请选择">
              <el-option
                v-for="item in options9"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            数值来自
            <el-select
              v-model="value6"
              clearable
              placeholder="请选择"
              style="margin-right: 10px"
            >
              <el-option
                v-for="item in options6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </p>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 11px">
            取值描述
          </div>
          <div style="float: left; font-size: 12px; margin: 15px 0 0 4px">
            <textarea
              name=""
              id=""
              style="
                border-radius: 5px;
                width: 650px;
                height: 270px;
                margin-left: 0.8%;
                padding-left: 15px;
                background: #fff;
              "
              disabled="disabled"
            >
【7天内重复住院人数】由小到大在所有值中排名</textarea
            >
          </div>
        </el-tab-pane>
        <el-tab-pane label="分组赋值">
          <p style="font-size: 12px; margin: 15px 0 0 10px">
            赋值依据
            <el-select
              v-model="value6"
              clearable
              placeholder="请选择"
              style="margin-right: 10px; margin-left: 43px"
            >
              <el-option
                v-for="item in options6"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option> </el-select
            ><span style="color: #ccc">分组名称即赋值</span>
          </p>
          <div style="font-size: 12px; margin: 15px 0 0 10px">
            分组赋值方式
            <el-select
              v-model="value10"
              :change="num(value10)"
              clearable
              placeholder="请选择"
              style="margin-right: 10px; margin-left: 20px"
            >
              <el-option
                v-for="item in options10"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div class="addfenzu" id="addfenzu">添加分组</div>
            <div
              id="options"
              style="
                height: 243px;
                display: none;
                margin-top: 20px;
                overflow-y: auto;
              "
            >
              <div class="fenzu" v-for="(item, id) in fenzu" :key="id">
                <input type="text" v-model="item.name" /><input
                  v-model="item.num"
                  type="text"
                  style="margin-right: -4px"
                />
                <el-select v-model="item.select" slot="prepend">
                  <el-option label="<  (小于)" value="1"></el-option>
                  <el-option label="≦  (小于等于)" value="2"></el-option>
                </el-select>
                值
                <el-select v-model="item.select2" slot="prepend">
                  <el-option label="<  (小于)" value="1"></el-option>
                  <el-option label="≦  (小于等于)" value="2"></el-option>
                </el-select>
                <input
                  v-model="item.num2"
                  type="text"
                  style="margin-left: -5px"
                />
              </div>
            </div>
            <div id="options2" style="display: none; margin-top: 15px">
              区间间隔<input
                @click="selectValue($event)"
                v-model="input"
                type="text"
                style="
                  padding-left: 15px;
                  height: 22px;
                  width: 109px;
                  border-radius: 3px;
                  margin-left: 52px;
                  border: 1px solid #ccc;
                "
              />
              <br /><span
                style="color: #27cd6b; margin-left: 100px; line-height: 30px"
                >该字段已被分为5组</span
              >
            </div>
            <div class="qita" id="qita">
              <input
                type="checkbox"
                @click="xianshi($event)"
              />未分组的值分到<input type="text" disabled v-model="qita" />
            </div>
            <div class="qitawenzi">分组设置（本维度最小值0，最大值421）</div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="bottom">
        <div>取消</div>
        <div>确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      const: 0,
      tabPosition: "left",
      input: "90",
      qita: "其他",
      label: "",
      value: "选项1",
      value2: "选项1",
      value3: "选项1",
      aa: "",
      value4: "选项1",
      value5: "选项1",
      value6: "选项1",
      value7: "选项1",
      value8: "选项1",
      value9: "选项1",
      value10: "选项1",
      options: [
        {
          value: "选项1",
          label: "系统时间",
        },
      ],
      options2: [
        {
          value: "选项1",
          label: "系统时间",
        },
      ],
      options3: [
        {
          value: "选项1",
          label: "年",
        },
        {
          value: "选项2",
          label: "季度",
        },
        {
          value: "选项3",
          label: "月",
        },
        {
          value: "选项4",
          label: "天",
        },
        {
          value: "选项5",
          label: "时",
        },
        {
          value: "选项6",
          label: "分",
        },
        {
          value: "选项7",
          label: "秒",
        },
      ],
      aa: [],
      options4: [
        {
          value: "选项1",
          label: "年份",
        },
        {
          value: "选项2",
          label: "季度",
        },
        {
          value: "选项3",
          label: "月份",
        },
        {
          value: "选项4",
          label: "月日",
        },
        {
          value: "选项5",
          label: "星期",
        },
        {
          value: "选项6",
          label: "日",
        },
        {
          value: "选项7",
          label: "周数",
        },
        {
          value: "选项8",
          label: "时",
        },
        {
          value: "选项9",
          label: "分",
        },
        {
          value: "选项10",
          label: "秒",
        },
        {
          value: "选项11",
          label: "年季度",
        },
        {
          value: "选项12",
          label: "年月",
        },
        {
          value: "选项13",
          label: "年周数",
        },
        {
          value: "选项14",
          label: "年月日",
        },
        {
          value: "选项15",
          label: "年月日时",
        },
        {
          value: "选项16",
          label: "年月日时分",
        },
        {
          value: "选项17",
          label: "年月日时分秒",
        },
      ],
      options5: [
        {
          value: "选项1",
          label: "所有值",
        },
        {
          value: "选项2",
          label: "组内所有值",
        },
      ],
      options6: [
        {
          value: "选项1",
          label: "7天内重复入院人数",
        },
        {
          value: "选项2",
          label: "出院人数",
        },
        {
          value: "选项3",
          label: "操作人数",
        },
      ],
      options7: [
        {
          value: "选项1",
          label: "求和",
        },
        {
          value: "选项2",
          label: "求平均值",
        },
        {
          value: "选项3",
          label: "求最大值",
        },
        {
          value: "选项4",
          label: "求最小值",
        },
      ],
      options8: [
        {
          value: "选项1",
          label: "累计值",
        },
        {
          value: "选项2",
          label: "组内累计值",
        },
      ],
      options9: [
        {
          value: "选项1",
          label: "升序排名",
        },
        {
          value: "选项2",
          label: "降序排名",
        },
        {
          value: "选项3",
          label: "组内降序排名",
        },
        {
          value: "选项4",
          label: "组内降序排名",
        },
      ],
      options10: [
        {
          value: "选项1",
          label: "自定义",
        },
        {
          value: "选项2",
          label: "自动",
        },
      ],
      fenzu: [
        {
          id: 1,
          name: "分组1",
          num: "0",
          num2: "90",
          select: "2",
          select2: "1",
        },
        {
          id: 2,
          name: "分组2",
          num: "90",
          num2: "180",
          select: "2",
          select2: "1",
        },
        {
          id: 3,
          name: "分组3",
          num: "180",
          num2: "270",
          select: "2",
          select2: "1",
        },
        {
          id: 4,
          name: "分组4",
          num: "270",
          num2: "360",
          select: "2",
          select2: "1",
        },
        {
          id: 5,
          name: "分组5",
          num: "360",
          num2: "450",
          select: "2",
          select2: "2",
        },
      ],
      data: [
        {
          label: "常用函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "数学和三角函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "日期函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "文本函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "逻辑函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "其他函数",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      data2: [
        {
          label: "数值字段",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "文本字段",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        },
        {
          label: "时间字段",
          children: [
            {
              id: 1,
              label: "aaa",
            },
            {
              id: 2,
              label: "aaa",
            },
          ],
        }
      ],
      defaultProps2: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    num(value10) {
      this.$nextTick(function () {
        const aa = value10;
        const bb = document.getElementById("options");
        const cc = document.getElementById("options2");
        const dd = document.getElementById("qita");
        const ee = document.getElementById("addfenzu");
        if (aa == "") {
          bb.style.display = "none";
          cc.style.display = "none";
          dd.style.display = "none";
          ee.style.display = "none";
        } else {
          if (aa == "选项1") {
            bb.style.display = "block";
            cc.style.display = "none";
            dd.style.display = "block";
            ee.style.display = "block";
          } else {
            bb.style.display = "none";
            cc.style.display = "block";
            dd.style.display = "none";
            ee.style.display = "none";
          }
        }
      });
    },
    selectValue(e) {
      e.currentTarget.select();
    },
    xianshi(q) {
      let a = q.currentTarget.nextElementSibling;
      a.disabled = !a.disabled;
    },
    hanshu(e) {
      this.const++;
      const a = document.getElementById("lu");
      if (this.const % 2 == 0) {
        e.currentTarget.firstElementChild.style.transform = "rotate(0deg)";
        e.currentTarget.nextElementSibling.style.display = "none";
        a.style.width = "553px";
      } else {
        e.currentTarget.nextElementSibling.style.display = "block";
        e.currentTarget.firstElementChild.style.transform = "rotate(180deg)";
        a.style.width = "382px";
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  position: absolute;
  background: rgba(35, 46, 64, 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.list {
  height: 470px;
  width: 860px;
  background: #ffffff;
  margin: 0 auto;
  margin-top: 11.5%;
  padding: 15px 20px;
}
.list > p {
  font-size: 14px;
  font-weight: bold;
}
.list > p > input {
  width: 338px;
  height: 20px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-left: 5px;
  padding-left: 5px;
}
.list > p > input:hover {
  border: 1px solid #3b86ef;
}
.list > p > input:focus {
  outline-offset: none;
  outline: none;
  border: 1px solid #3b86ef !important;
}
#options2 input:hover {
  border: 1px solid #3b86ef !important;
}
#options2 input:focus {
  outline-offset: none;
  outline: none;
  border: 1px solid #3b86ef !important;
}
.addfenzu {
  font-size: 12px;
  color: #506688;
  text-align: right;
  width: 95%;
  position: absolute;
  height: 25px;
}
.fenzu {
  margin-bottom: 15px;
}
.fenzu input {
  height: 22px;
  width: 188px;
  border: 1px solid #ccc;
  margin: 0 5px 0 5px;
  padding-left: 10px;
}
.fenzu input:focus {
  outline-offset: none;
  outline: none;
}
.fenzu span {
  height: 22px;
  line-height: 22px;
  width: 22px;
  border: 1px solid #ccc;
  margin-left: -6px;
  margin-right: 7px;
  display: inline-block;
}
.qita {
  height: 24px;
  line-height: 24px;
  margin-top: 8px;
  padding-left: 20px;
  float: left;
  position: relative;
}
.qita input:nth-child(1) {
  height: 16px !important;
  width: 16px !important;
  position: absolute;
  top: 5px;
  left: 0;
}
.qita input:nth-child(2) {
  height: 22px !important;
  width: 106px !important;
  padding-left: 10px;
  margin-left: 5px;
  border: 1px solid #ccc;
}
.qita input:nth-child(2):focus {
  outline-offset: 0px;
  outline: 0px;
  border-color: #3b86ef;
}
.qitawenzi {
  height: 24px;
  line-height: 34px;
  position: absolute;
  right: 10px;
  bottom: 5px;
  color: #ccc;
}
.bottom {
  float: right;
  margin-top: 20px;
}
.bottom > div:nth-child(1) {
  color: #3b86ef;
  background: #fff;
}
.bottom > div:nth-child(1):hover {
  background: #f5f9fe;
}
.bottom > div:nth-child(2):hover {
  background: #4e92f1;
}
.bottom > div {
  float: left;
  height: 24px;
  line-height: 24px;
  width: 80px;
  margin-left: 20px;
  text-align: center;
  background: #3b86ef;
  font-size: 14px;
  color: #fff;
  border: 1px solid #3b86ef;
}
.hanshu {
  height: 366px;
  width: 22px;
  color: #3e4d65;
  border-right: 1px solid #e8eaed;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 7px;
  float: left;
  background: #fff;
}
.hanshulist {
  float: left;
  height: 366px;
  width: 170px;
  padding-top: 10px;
  background: #fff;
  border-right: 1px solid #e8eaed;
}
.hanshulist input {
  width: 120px;
  height: 22px;
  margin-left: 10px;
  padding-left: 25px;
  border: 1px solid #e8eaed;
  border-radius: 3px;
}
.hanshulist input:hover {
  border: 1px solid #3b86ef;
}
.hanshulist input:focus {
  border: 1px solid #3b86ef;
  outline-offset: none;
  outline: none;
}
.gongshi {
  height: 376px;
  width: 553px;
  float: left;
}
.gongshi > div:nth-child(1) {
  height: 34px;
  line-height: 34px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e8eaed;
}
.gongshi > div:nth-child(1) span {
  margin-left: 10px;
  margin-right: 10px;
}
.gongshi > div:nth-child(1) span a {
  text-decoration: none;
  color: #918c88;
  font-weight: bold;
}
.gongshi > div:nth-child(2) {
  height: 341px;
  line-height: 34px;
  width: 100%;
  background: #fff;
  font-size: 14px;
  border-bottom: 1px solid #e8eaed;
}
.gongshi > div:nth-child(2):focus {
  outline: none;
}
/*为空时显示 element attribute content*/
.gongshi > div:nth-child(2):empty:before {
  content: attr(placeholder); /* element attribute*/
  /*content: 'this is content';*/
  color: #9ea6b2;
  font-size: 14px;
}
/*焦点时内容为空*/
.gongshi > div:nth-child(2):focus:before {
  content: none;
}
</style>
